<style>
    /* 容器，旋转中心点 */
    .container {
      /* width:50px;
      height:50px;
      border:1px solid yellow; */
  
      left: 600px;
      top: 200px;
      /*设置为绝对定位 */
      position: absolute;
      /*设置景深 显示3D效果，没有近大远小的效果*/
      /* perspective: 800px;*/
      /*设置容器为3D空间*/
      transform-style: preserve-3d;
      /* 设置中心点 */
      /* transform-origin:50% 50% 0; */
  
      /*设置动画 linear匀速、infinite 无限循环、alternate 平滑过渡效果*/
      animation: play 5s linear infinite;
    }
  
    .container [class^='sub'] {
      position: absolute;
      width: 100px;
      height: 100px;
      top: -50px;
      left: -50px;
      border: 1px solid red;
      border-radius: 50%
    }
  
    /* rotate 旋转、translate平移 */
    .subY {
      transform: rotateY(90deg);
    }
  
    .subX {
      transform: rotateX(90deg);
    }
  
    #img1 {
      transform: translateZ(-100px) translateX(0px) translateY(0px) rotateY(0deg);
    }
  
    #img2 {
      transform: translateZ(0px) translateX(-100px) translateY(0px) rotateY(90deg);
    }
  
    #img3 {
      transform: translateZ(0px) translateX(100px) translateY(0px) rotateY(-90deg);
    }
  
    #img4 {
      transform: translateZ(0px) translateX(0px) translateY(100px) rotateX(-90deg);
    }
  
    #img5 {
      transform: translateZ(0px) translateX(0px) translateY(-100px) rotateX(-90deg);
    }
  
    #img6 {
      transform: translateZ(100px) translateX(0px) translateY(0px) rotateX(0deg);
    }
  
    .container img {
      width: 200px;
      height: 200px;
      position: absolute;
      top: -100;
      left: -100;
      margin: 0 auto;
      color: red;
    }
  
    .love-line {
      width: 200px;
      height: 200px;
      border: 3px solid red;
      border-color: red;
      /* border-radius: 50% 50% 0/40% 50% 0; */
      /* 左上 右上 右下 左下，缺少的值由它的对角的值代替
      【/】分割 水平半径/垂直半径 */
      border-radius: 50% 0 0 10% /20% 0 0 50%;
      /* border-radius: 50% 0 0/20% 0 0; */
      position: absolute;
      left: 100px;
      top: 200px;
      /* transform: rotateZ(45deg); */
      z-index: 10;
      /* 设置属性变化的过渡效果 */
      transition: all 2s;
    }
  
  
    .love-line2 {
      width: 200px;
      height: 200px;
      border: 3px solid yellow;
      position: absolute;
      left: 100px;
      top: 200px;
    }
  
  
    .love {
      position: absolute;
      top: 100px;
      left: 200px;
      width: 0;
      height: 0;
      border-top: solid 60px red;
      border-right: solid 50px transparent;
      border-left: solid 50px transparent;
      animation: play 0.1s linear infinite alternate;
    }
  
    .love:after {
      content: "";
      position: absolute;
      top: -99px;
      left: -52px;
      width: 55px;
      height: 55px;
      background: red;
      border-radius: 50%;
    }
  
    .love:before {
      content: "";
      position: absolute;
      top: -99px;
      left: -3px;
      width: 55px;
      height: 55px;
      background: red;
      border-radius: 50%;
    }
  
    @keyframes play {
      from {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
      }
  
      to {
        transform: rotateZ(360deg) rotateX(360deg) rotateY(360deg);
      }
    }
  
  
    .snow {
      position: absolute;
      color: white;
      opacity: 0.7;
      top: -35px;
      z-index: 99;
      animation: ratate 5s linear infinite alternate;
    }
  
  
    @keyframes ratate {
      from {
        transform: rotateZ(0deg);
      }
  
      to {
        transform: rotateZ(360deg);
      }
    }
  
    .btnLogin {
      background-color: #3a84e8;
      width: 100px;
      height: 30px;
      color: white;
      font-size: 18px;
      border-top: 0;
      border-left: 0;
      border-bottom: 1px solid #2984d7;
      border-right: 1px solid #2984d7;
    }
  
    .mask {
      left: 0px;
      top: 0px;
      position: absolute;
      background: black;
      opacity: 0.7;
      width: 100%;
      height: 100%;
      z-index: 1000;
      /* display:none; */
    }
  
    .content {
      position: absolute;
      width: 400px;
      background-color: white;
      margin: 10px;
      padding: 20px;
      z-index: 1001;
    }
  
    .login {
      background-color: #3a84e8;
      width: 100%;
      height: 42px;
      color: white;
      font-size: 18px;
      border-top: 0;
      border-left: 0;
      border-bottom: 1px solid #2984d7;
      border-right: 1px solid #2984d7;
      border-radius: 5px;
      margin-top: 20px;
    }
  
    .uid,
    .pwd {
      width: 100%;
      height: 40px;
      font-size: 18px;
      margin-top: 20px;
      padding-left: 25px;
      border-radius: 5px;
      border: 1px solid #2984d7;
  
    }
  
    .title {
      background: url('./img/loginlogo.png') no-repeat;
      width: 100%;
      height: 30px;
      position: relative;
    }
  
    .title a {
      position: absolute;
      right: 0px;
      width: 15px;
      height: 15px;
      background: url('./img/pass_login_icons.png') no-repeat -56px -48px;
    }
  
    .title a:hover {
      background: url('./img/pass_login_icons.png') no-repeat -72px -48px;
    }
  
    .title span {
      position: absolute;
      left: 150px;
      line-height: 30px;
      font-size: 18px;
    }
  </style>
  
  
  <body style='background-color:black'>
    <button class="btnLogin">登录</button>
    <!-- 
    <div class="mask"></div>
    <div class="content">
        <div class="title"><span>用户名密码登录</span><a class="closeBtn"></a></div>
        <input type="text" name="" id="" placeholder= "请输入用户名" class="uid">
        <input type="text" name="" id="" placeholder='请输入密码' class="pwd">
        <button class="login">登录</button>
    </div>
     -->
    <!-- 旋转方块的容器 -->
    <div class="container">
      <!-- 旋转方块中心的三个坐标上的圆 -->
      <div class="subZ"></div>
      <div class="subY"></div>
      <div class="subX"></div>
      <!-- 旋转方块的六面贴图 -->
      <img id='img1' src="img/love01.jpg" alt="Love雷">
      <img id='img2' src="img/love02.jpg" alt="Love雷">
      <img id='img3' src="img/love03.jpg" alt="Love雷">
      <img id='img4' src="img/love04.jpg" alt="Love雷">
      <img id='img5' src="img/love05.jpg" alt="Love雷">
      <img id='img6' src="img/love06.jpg" alt="Love雷">
    </div>
    <!-- 旋转的心 -->
    <div class="love"></div>
  
    <div class="love-line"></div>
    <div class="love-line2"></div>
    <!-- 输入框测试显示遮罩层时，是否可以输入。 -->
    <input type="text" name="" id="" class='uid'>
  </body>
  <script>
    // 雪花最大值
    var showMaxValue = 35
    // 雪花最小值
    var showMinValue = 5
    // 可视区域的大小
    var cWidth = document.body.offsetWidth;
    var cHeight = document.body.offsetHeight;
    // 创建雪花模板
    var snow = document.createElement('div');
    // 雪花定时落下
    var timer = setInterval(function () {
      // 生成一个雪花
      var snowClone = snow.cloneNode();
      // 雪花是个文字
      snowClone.innerHTML = "❉";
      // 设置雪花样式类名
      snowClone.className = "snow";
      // 设置雪花大小
      snowClone.style.fontSize = (showMinValue + Math.random() * (showMaxValue - showMinValue)) + "px";
      // 设置雪花落下的位置
      snowClone.style.left = Math.random() * cWidth - showMaxValue;
      // 将雪花添加到页面中
      document.body.appendChild(snowClone);
      // 雪花起始高度
      var Top = -showMaxValue;
      // 雪花的落下速度
      var speed = 2 + Math.random() * 10;
      // 定时更改雪花的上边距和透明度，显示出动态落下的效果
      var timerTemp = setInterval(function () {
        snowClone.style.top = Top + 'px';
        snowClone.style.opacity = (cHeight - Top) / cHeight * 0.7;
        Top += speed;
        // 雪花落到最下面的时候，移除雪花和定时器
        if (Top > cHeight - 50) {
          clearInterval(timerTemp);
          document.body.removeChild(snowClone);
        }
      }, 100);
    }, 100);
  
  
    window.onload = function () {
      // 选择主页上的登录按钮
      var btnLogin = document.getElementsByClassName('btnLogin')[0];
  
      // 主页面登录按钮点击事件
      btnLogin.onclick = function () {
        // 创建遮罩层
        var mask = document.createElement('div');
        // 设置遮罩层样式
        mask.className = 'mask';
        // 添加到body中
        document.body.appendChild(mask);
        // 创建登录框
        var content = document.createElement('div');
        // 添加登录框样式
        content.classList.add('content');
        // 设置登录框内容
        content.innerHTML = `
                <div class="title"><span>用户名密码登录</span><a class="closeBtn"></a></div>
                <input type="text" name="" id="" placeholder= "请输入用户名" class="uid">
                <input type="text" name="" id="" placeholder='请输入密码' class="pwd">
                <button class="Login">登录</button>`;
        // 将登录框添加到body中
        document.body.appendChild(content);
        //选择登录框中的关闭按钮
        var closeBtn = document.getElementsByClassName('closeBtn')[0];
        // 设置登录框中的关闭按钮点击事件
        closeBtn.onclick = function () {
          // 当点击关闭按钮时，移除遮罩层和登录框
          document.body.removeChild(mask);
          document.body.removeChild(content);
        }
        // 选择登录框中的登录按钮
        var login = document.getElementsByClassName('login')[0];
        // 设置登录按钮点击事件
        login.onclick = function () {
          document.body.removeChild(mask);
          document.body.removeChild(content);
        }
  
        var left = 0;
        var top = 0;
        // 选择登录框中的标题部分
        var title = document.getElementsByClassName('title')[0];
        // 设置在标题中按下鼠标按键的处理
        title.onmousedown = function (e) {
          left = e.pageX - parseInt(content.offsetLeft);
          top = e.pageY - parseInt(content.offsetTop);
          // 当鼠标在标题中按下时，添加鼠标移动的消息处理
          document.addEventListener('mousemove', moveHandle);
        }
        // 设置鼠标抬起时的处理
        document.onmouseup = function (e) {
          // 当鼠标抬起时，移除鼠标移动事件
          document.removeEventListener('mousemove', moveHandle);
        }
        // 鼠标移动处理
        function moveHandle(e) {
          var tempT = e.pageY - top;
          if (tempT <= 0) {
            tempT = 0;
          }
          if (tempT >= parseInt(document.body.clientHeight) - parseInt(content.offsetHeight)) {
            tempT = parseInt(document.body.clientHeight) - parseInt(content.offsetHeight);
          }
          var tempL = e.pageX - left;
          if (tempL <= 0) {
            tempL = 0;
          }
  
          if (tempL >= parseInt(document.body.clientWidth) - parseInt(content.offsetWidth)) {
            tempL = parseInt(document.body.clientWidth) - parseInt(content.offsetWidth);
          }
  
          content.style.left = tempL + 'px';
          content.style.top = tempT + 'px';
  
        }
  
      }
    }
  
  </script>